<template>
	<view class="">
		<view class="">
			<view class="top" v-if="list.length">
				<u-checkbox v-model="allChecked" shape="circle" active-color="#628DFF" @change="clKall"><text text
						style="color: #333;">全选</text> <text
						style="color: #333;margin-left: 10rpx;">共{{select}}计宝贝</text></u-checkbox>
				<view class="del" @click="del">
					<u-icon name="trash" size="26" color="#628DFF"></u-icon>
					<text class="u-margin-left-5">删除</text>
				</view>
			</view>

			<view class="" v-for="(item,index) in list" :key="index" class="list" >
				<u-checkbox v-model="item.check" shape="circle" active-color="#628DFF" @change="itemCheck"></u-checkbox>
				<view class="u-flex">
					<u-image :src="item.cover" width="160" height="160" @click="go(item)"></u-image>
					<view class="right">
						<view class="title">
							{{item.goodsName}}
						</view>
						<view class="size">
							{{item.specName}}
						</view>

						<view class="controls">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="">
								<u-number-box v-model="item.num" @change="valChange(item)" bg-color="#628DFF"
									color="#fff" min="1">
								</u-number-box>
							</view>
						</view>
					</view>


				</view>
			</view>
		</view>

		<view class="bottomFix" v-if="list.length">
			<view style="font-size: 24rpx;color: #999;">
				已选{{select}}件
			</view>
			<view class="u-flex" style="align-items: center;">
				<view class="u-flex u-margin-right-20">
					<view>不含运费共：</view>
					<view style="color:#FF6450;font-size: 56rpx;">￥{{allPrice}}</view>
				</view>
				<view class="sure" @click="sure">结算</view>
			</view>

		</view>
		
		<u-toast ref="uToast" />
	
		<u-loadmore :status="status" v-if="list.length"/>
		
		<view class="empty">
			<u-empty text="购物车空的" mode="car"  v-if="!list.length"></u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allChecked: false,
				allPrice: 0,
				select: 0,

				list: [],
				status: 'loadmore',
				page: 1,
			}

		},
		async onShow() {
		    await this.getCar()
		},
		onPullDownRefresh() {
			this.page = 1;
		
			this.getCar()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.getCar()
			}
		
		},
		
		methods: {
			go(item){
				uni.navigateTo({
					url:"../shop/detail?id="+item.goodsId +'&Sid='+item.goodsSpecId
				})
				
			},
			valChange(){
				this.jisuan()
			},
			 getCar() {
				return new Promise((resolve,reject)=>{
					this.$u.post('/api/indent/cart', {
						page: this.page,
						limit: 10
					}, {}).then(res => {
						var resList = res.data;
						resList.forEach(item => {
							item.check = false
						})
						if (this.page == 1) {
							this.list = []
						}
						if (resList.length > 9) {
							this.status = 'loadmore'
							this.page = this.page + 1
						} else {
							this.status = 'nomore'
						}
						this.list = this.list.concat(resList)
						this.loading = false;
						
						 this.jisuan()
						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})
				
			},
			clKall(e) {
				this.list.forEach(item => {
					item.check = !this.allChecked
				})
				this.$nextTick(() => {
					this.jisuan()
				})
			},
			sure() {
				var length = this.list.filter(item => item.check).length;
				if(!length){
				  this.$u.toast("请先选择商品")
					}else{
					var list = this.list;
					var arr = [];		
					for (var i = 0; i < list.length; i++) {
						if (list[i].check) {
						   arr.push(list[i].id)
						}	
					}
					console.log(arr)
					uni.switchTab({
						url: "../sure_book/index?car_id="+arr
					})
				
				}
			
			},
			itemCheck(e) {
				this.$nextTick(() => {
					this.jisuan()
				})

			},
		    async del() {

				var length = this.list.filter(item => item.check).length;
				var list = this.list;
				if (!length) {
					this.$u.toast("请先选择删除的商品")
				} else {
					uni.showModal({
						title: "提示",
						content: "是否删除购物车",
						success: (res) => {
							if (res.confirm) {
								for (var i = 0; i < list.length; i++) {
									if (list[i].check) {
										this.$u.post('/api/indent/cartDel', {
											cart_id: list[i].id
										}, {}).then(res => {
                                               this.$refs.uToast.show({
                                               		title: '删除成功',
                                               		type: 'error',
                                               })
											   this.page=1;
											   this.getCar();                
										}).catch(err => {})
									}
								}

							}
						}
					})
				}
			},
			jisuan() {
				var list = this.list
				let total = 0;
				var arr = [];

				for (var i = 0; i < list.length; i++) {
					if (list[i].check) {
						total += list[i].price * list[i].num

					}

					arr.push(list[i].check)
				}


				if (arr.every(ele => ele == true)) {
					this.allChecked = true
				} else {
					this.allChecked = false
				}
				this.select = arr.filter(item => item).length;
				this.allPrice = total.toFixed(2)
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 690rpx;
		display: flex;
		margin: 40rpx auto;
		align-items: center;
		justify-content: space-between;

		.del {
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #FCFCFC;
			border: 2rpx solid #628DFF;
			box-sizing: border-box;
			border-radius: 30rpx;
			text-align: center;
			font-size: 24rpx;
			color: #628DFF;

		}
	}

	.list {
		width: 690rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		margin: auto;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.right {
			margin-left: 20rpx;
			width: 400rpx;

			.size {
				background: #F6F6F6;
				border-radius: 30rpx;
				padding: 7rpx 30rpx;
				text-align: center;
				display: table !important;
				font-size: 24rpx;
				color: #999999;
				margin: 20rpx 0;
			}
		}

		.controls {
			display: flex;
			justify-content: space-between;

			.price {
				color: #FF6450;
				font-size: 36rpx;
			}
		}



	}

	.bottomFix {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;
		box-shadow: 0px -2rpx 6rpx rgba(229, 229, 229, 0.4);
	}

	.sure {
		width: 200rpx;
		height: 80rpx;
		background: #FF6450;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #fff;

	}

	.u-number-input {
		background: transparent !important;
		color: #333 !important;
	}
</style>
